<template>
	<view class="page">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" color="#fff" transparent="hidden" :fixed="true">
			<view slot="left" class="flex justify-center align-center container-top" style="width:100%;margin: 0 45rpx;">
				<view class="cuIcon-back" style="font-size: 36rpx;position: absolute;left: 30rpx;" @tap="back">
				</view>
				<view class="" style="font-size: 36rpx;">
					我的签到
				</view>
			</view>
		</hx-navbar>
		<view class="signinbj">
			<image src="../../static/imgs/signinbj.png" mode="widthFix"></image>
		</view>
		<view class="text-white">
			<view class="myintegral text-bold">
				我的积分
			</view>
			<view class="text-bold exchange">
				<text>197</text>=1.97元
			</view>
			<view class="renew">
				签到积分可以抵扣续费
			</view>
		</view>
		<view class="sign-main">
				<view class="sign-tian">
					已连续签到 <text class="lvshe">2</text> 天
				</view>
				<view class="flex">
					<view class="signinTime shadow checked">
						<view class="signinTime-yang">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
					<view class="signinTime shadow checked">
						<view class="signinTime-yang">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
					<view class="signinTime shadow">
						<view class="signinTime-yang">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
					<view class="signinTime shadow">
						<view class="signinTime-yang ">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
					<view class="signinTime shadow">
						<view class="signinTime-yang ">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
					<view class="signinTime shadow">
						<view class="signinTime-yang">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
					<view class="signinTime shadow">
						<view class="signinTime-yang">
							+5
						</view>
						<view class="week text-center">
							周二
						</view>
					</view>
				</view>
				<view class="remind flex justify-end align-center">
					<view class="title">签到提醒</view>
					<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		    data() {
		        return {
					switchA: false,
		        };
		    },
		    methods: {
	        back(){
				    uni.navigateBack({
				    });
	        },
			SwitchA(e) {
			    this.switchA = e.detail.value;
			},
	    },
	};
</script>

<style>
	.signinbj{
		width: 100%;
		position: absolute;
		top: 0;
		z-index: -1;
	}
	.text-white{
		margin-left: 30rpx;
		margin-bottom: 33rpx;
	}
	.signinbj image{
		width: 100%;
	}
	.myintegral{
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	.exchange{
		margin: 10rpx 0;
		font-size: 24rpx;
	}
	.exchange text{
		font-size: 60rpx;
	}
	.renew{
		font-size: 22rpx;
	}
	.sign-main{
		/* width: 700rpx; */
		height: 348rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		padding: 40rpx 20rpx;
	}
	.lvshe{
		color: #26C594;
	}
	.signinTime{
		width: 85rpx;
		height: 116rpx;
		border-radius: 20rpx;
		background-color: #F5F5F5;
	}
	.shadow{
		box-shadow: 1px 2px 4px rgba(26, 26, 26, 0.2)
	}
	.signinTime+.signinTime{
		margin-left: 10rpx;
	}
	.signinTime.checked{
		background-color: #26C594;
	}
	.signinTime.checked .signinTime-yang{
		color: #26C594;
		background-color: #FFFFFF;
		box-shadow: 0px 4rpx 3px #85C7B0 inset;
	}
	.signinTime.checked .week{
		color: #FFFFFF;
	}
	.signinTime-yang{
		width: 59rpx;
		height: 59rpx;
		line-height: 59rpx;
		text-align: center;
		border-radius: 50%;
		font-weight: bold;
		font-size: 26rpx;
		background-color: #EAEAEA;
		margin:auto;
		margin-top:12rpx;
		margin-bottom:5rpx;
		color: #999999;
		box-shadow: 0px 4rpx 3px #CCCCCC inset;
	}
	
	.sign-tian{
		font-size: 32rpx;
		margin-bottom: 35rpx;
	}
	.sign-tian text{
		margin: 0 8rpx;
	}
	.week{
		font-size: 22rpx;
		transform: scale(0.8);
		color: #999999;
	}
	.remind{
		margin-top: 35rpx;
	}
	.remind .title{
		margin-right: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>
